<template>
	<div id="reg-page">
		<van-nav-bar title="注册" left-arrow @click-left="$router.back()">
			<template #right>
				<van-icon name="ellipsis" size="18" />
			</template>
		</van-nav-bar>
		<van-image
			width="3.2rem"
			height="3.2rem"
			src="	http://s.weituibao.com/1582958061265/mlogo.png"
		/>

		<van-form @submit="onSubmit">
			<van-field
				v-model="username"
				name="username"
				label="用户名"
				placeholder="用户名"
				:rules="rules.username"
			/>
			<van-field
				v-model="password"
				type="password"
				name="password"
				label="密码"
				placeholder="密码"
				:rules="rules.password"
			/>
			<div class="reg-text"><a href="#/login">已有登陆账号</a></div>
			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>注册</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
export default {
	name: "Reg",
	data() {
		return {
			username: "",
			password: "",
			rules: {
				username: [
					{
						required: true,
						message: "请填写用户名",
					},
				],
				password: [
					{
						required: true,
						message: "请填写密码",
					},
				],
			},
		};
	},
	mounted() {
		this.$parent.showTabbar = false;
	},
	destroyed() {
		this.$parent.showTabbar = true;
	},
	methods: {
		// onSubmit(values) {
		// 	this.$axios
		// 		.post("/user/register", {
		// 			username: values.username,
		// 			password: values.password,
		// 		})
		// 		.then((data) => {
		// 			console.log(data);
		// 			if (data.status === 200) {
		// 				console.log("data", data);
		// 				this.$router.replace({
		// 					path: "/login",
		// 					query: {
		// 						username: values.username,
		// 					},
		// 				});
		// 			} else {
		// 				this.$toast("注册失败");
		// 			}
		// 		});
		// }
		// }
		// ------------------------------------------------------
		async onSubmit(values) {
			const { data, resultCode } = await this.$axios.post("/user/register", {
				loginName: values.username,
				password: values.password,
			});
			console.log(data);
			if (resultCode == 200) {
				const { targetUrl = "/login" } = this.$route.query;
				this.$router.replace(targetUrl);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
#reg-page {
	.van-image {
		width: 150px !important;
		height: 150px !important;
		left: 50%;
		transform: translate(-50%);
		margin-top: 20px;
	}

	.van-form {
		padding: 15px;
		.reg-text {
			a {
				font-size: 14px;
				color: #1989fa;
				display: inline-block;
				margin-top: 20px;
				margin-left: 20px;
			}
		}
		.van-button--info {
			color: #fff;
			background-color: rgb(27, 174, 174);
			border: 1px solid rgb(27, 174, 174);
			.van-button__content {
				background: rgb(27, 174, 174);
				border-color: rgb(27, 174, 174);
				.van-button__text {
					color: rgb(255, 255, 255);
				}
			}
		}
	}
}
</style>
